<template>
  <div class="body">
    <div class="main-box">
      <div :class="['container', 'container-register', { 'is-txl': login_or_register }]">
        <form>
          <h2 class="title">注册</h2>
          <span style="font-size: small; color: gray"
            >id长度在6-20之间，只允许用数字与小写字母</span
          >
          <input class="form__input" type="text" placeholder="请输入用户id" v-model="r_userId" />
          <input class="form__input" type="text" placeholder="请输入昵称" v-model="r_nickName" />
          <input
            class="form__input"
            type="password"
            placeholder="请输入密码"
            v-model="r_password"
          />
          <input
            class="form__input"
            type="password"
            placeholder="请确认密码"
            v-model="r_confirmPassword"
          />
          <span v-if="register_error != ''" style="font-size: small; color: red">{{
            register_error
          }}</span>
          <div class="form__button" @click="register">立即注册</div>
        </form>
      </div>
      <div :class="['container', 'container-login', { 'is-txl is-z200': login_or_register }]">
        <form>
          <h2 class="title">登录</h2>
          <input class="form__input" type="text" placeholder="用户id" v-model="l_userId" />
          <input
            class="form__input"
            type="password"
            placeholder="请输入密码"
            v-model="l_password"
          />
          <span v-if="login_error != ''" style="font-size: small; color: red">{{
            login_error
          }}</span>
          <div class="form__button" @click="login">立即登录</div>
        </form>
      </div>
      <div :class="['switch', { login: login_or_register }]">
        <div class="switch__circle"></div>
        <div class="switch__circle switch__circle_top"></div>
        <div class="switch__container">
          <h2>{{ login_or_register ? '您好 !' : '欢迎回来 !' }}</h2>
          <p>
            {{
              login_or_register
                ? '如果您还没有账号，请点击下方立即注册按钮进行账号注册'
                : '如果您已经注册过账号，请点击下方立即登录按钮进行登录'
            }}
          </p>
          <div class="form__button" @click="login_or_register = !login_or_register">
            {{ login_or_register ? '立即注册' : '立即登录' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,watch } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

const login_or_register = ref(true) // true: 登录，false: 注册

// 登录表单
const l_userId = ref('')
const l_password = ref('')
const login_error = ref('')

// 注册表单
const r_userId = ref('')
const r_nickName = ref('')
const r_password = ref('')
const r_confirmPassword = ref('')
const register_error = ref('')

// 清空表单
const clear_value = () => {
  l_userId.value = ''
  l_password.value = ''
  r_userId.value = ''
  r_nickName.value = ''
  r_password.value = ''
  r_confirmPassword.value = ''
}
const clear_error = () => {
  login_error.value = ''
  register_error.value = ''
}

// 校验
const check_id_valid = (id: string) => /^[0-9a-z]{6,20}$/.test(id)
const check_password_valid = (password: string) => /^[0-9a-zA-Z]{6,20}$/.test(password)
const check_nickname_valid = (nickname: string) => nickname.length > 0 && nickname.length <= 20
const check_password_comfirm = (password: string, confirm_password: string) => password === confirm_password

// 登录逻辑
const login = async () => {
  clear_error()
  if (!check_id_valid(l_userId.value)) {
    login_error.value = 'id格式错误'
    return
  }
  if (!check_password_valid(l_password.value)) {
    login_error.value = '密码格式错误'
    return
  }
  // 调用 userStore.login 方法（需在 user.ts 里实现 login 方法，调用 loginAPI 并 setUser）
  const isLoginSuccess = await userStore.login(l_userId.value, l_password.value)
  if (!isLoginSuccess) {
    login_error.value = '账号或密码错误'
    return
  }
  router.push('/')
}

// 注册逻辑
const register = async () => {
  clear_error()
  if (!check_id_valid(r_userId.value)) {
    register_error.value = 'id格式错误'
    return
  }
  if (!check_nickname_valid(r_nickName.value)) {
    register_error.value = '昵称格式错误'
    return
  }
  if (!check_password_valid(r_password.value)) {
    register_error.value = '密码格式错误'
    return
  }
  if (!check_password_comfirm(r_password.value, r_confirmPassword.value)) {
    register_error.value = '两次密码不一致'
    return
  }
  // 调用 userStore.register 方法（需在 user.ts 里实现 register 方法，调用 registerAPI 并 setUser）
  const isRegisterSuccess = await userStore.register(
    r_userId.value,
    r_nickName.value,
    r_password.value,
  )
  if (!isRegisterSuccess) {
    register_error.value = '该id已存在，请换一个id'
    return
  }
  router.push('/')
}

// // 切换登录/注册
// const toggleMode = () => {
//   login_or_register.value = !login_or_register.value
//   clear_value()
//   clear_error()
// }
//登录注册切换 当进行了切换后，之前填的信息将被清除,可以根据login_or_register的值进行判断
watch(login_or_register, () => {
  clear_value()
  clear_error()
})
</script>

<style scoped>
.body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  background-image: url('@/assets/images/Cyber.jpg');
  color: #a0a5a8;
}
.main-box {
  position: relative;
  width: 1000px;
  min-width: 1000px;
  min-height: 600px;
  height: 600px;
  padding: 25px;
  background-color: #ecf0f3;
  box-shadow: 1px 1px 100px 10px #ecf0f3;
  border-radius: 12px;
  overflow: hidden;

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 600px;
    height: 100%;
    padding: 25px;
    background-color: #ecf0f3;
    transition: all 1.25s;

    form {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      color: #a0a5a8;

      .form__icon {
        object-fit: contain;
        width: 30px;
        margin: 0 5px;
        opacity: 0.5;
        transition: 0.15s;

        &:hover {
          opacity: 1;
          transition: 0.15s;
          cursor: pointer;
        }
      }

      .title {
        font-size: 34px;
        font-weight: 700;
        line-height: 3;
        color: #181818;
      }

      .text {
        margin-top: 30px;
        margin-bottom: 12px;
      }

      .form__input {
        width: 350px;
        height: 40px;
        margin: 4px 0;
        padding-left: 25px;
        font-size: 13px;
        letter-spacing: 0.15px;
        border: none;
        outline: none;
        font-family: 'Montserrat', sans-serif;
        background-color: #ecf0f3;
        transition: 0.25s ease;
        border-radius: 8px;
        box-shadow:
          inset 2px 2px 4px #d1d9e6,
          inset -2px -2px 4px #f9f9f9;

        &::placeholder {
          color: #a0a5a8;
        }
      }
    }
  }

  .container-register {
    z-index: 100;
    left: calc(100% - 600px);
  }

  .container-login {
    left: calc(100% - 600px);
    z-index: 0;
  }

  .is-txl {
    left: 0;
    transition: 1.25s;
    transform-origin: right;
  }

  .is-z200 {
    z-index: 200;
    transition: 1.25s;
  }

  .switch {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 300px;
    padding: 50px;
    z-index: 200;
    transition: 1.25s;
    background-color: #ecf0f3;
    overflow: hidden;
    box-shadow:
      4px 4px 10px #d1d9e6,
      -4px -4px 10px #f9f9f9;
    color: #a0a5a8;

    .switch__circle {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background-color: #ecf0f3;
      box-shadow:
        inset 8px 8px 12px #d1d9e6,
        inset -8px -8px 12px #f9f9f9;
      bottom: -60%;
      left: -60%;
      transition: 1.25s;
    }

    .switch__circle_top {
      top: -30%;
      left: 60%;
      width: 300px;
      height: 300px;
    }

    .switch__container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      position: absolute;
      width: 400px;
      padding: 50px 55px;
      transition: 1.25s;

      h2 {
        font-size: 34px;
        font-weight: 700;
        line-height: 3;
        color: #181818;
      }

      p {
        font-size: 14px;
        letter-spacing: 0.25px;
        text-align: center;
        line-height: 1.6;
      }
    }
  }

  .login {
    left: calc(100% - 400px);

    .switch__circle {
      left: 0;
    }
  }

  .form__button {
    width: 180px;
    height: 50px;
    border-radius: 25px;
    margin-top: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
    letter-spacing: 2px;
    background-color: #4b70e2;
    color: #f9f9f9;
    cursor: pointer;
    box-shadow:
      8px 8px 16px #d1d9e6,
      -8px -8px 16px #f9f9f9;

    &:hover {
      box-shadow:
        2px 2px 3px 0 rgba(255, 255, 255, 50%),
        -2px -2px 3px 0 rgba(116, 125, 136, 50%),
        inset -2px -2px 3px 0 rgba(255, 255, 255, 20%),
        inset 2px 2px 3px 0 rgba(0, 0, 0, 30%);
    }
  }
}
</style>
